import React from 'react';
import { Breadcrumb, Form, Row, Col, Input, Button, Table, message } from 'antd';
import { Link } from 'react-router-dom';
import './index.css';
import http from '../../http';
const { Column } = Table;
class Shop extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            shopList: [],
            pagination: {
                total: 1,
                pageSize: 10,
                pageNum: 1
            },
            inpValue: ''
        }
    }
    shopList = (pageSize,pageNum) => { //商品列表
        http.get('/api/manage/product/list.do?pageSize='+pageSize+'&pageNum='+pageNum).then(res => {
            this.setState({
                shopList: res.data.list,
                pagination: {
                    total: res.data.total,
                    pageSize: res.data.pageSize,
                    pageNum: res.data.pageNum
                }
            })
            // console.log(res.data)
        })
    }
    handelChange = (e) =>{ //获取搜索框内容
        e.persist();
        // console.log(e)
        this.setState({
            inpValue: e.target.value
        })
    }
    search = (pageSize,pageNum,inpValue) => { //搜索
        if (inpValue === '') {
            this.shopList(pageSize,pageNum)
        }else {
            http.get('/api/manage/product/search.do?pageSize='+pageSize+'&pageNum='+pageNum+'&productName='+inpValue).then(res => {
                // console.log(res.data)
                this.setState({
                    shopList: res.data.list,
                    pagination: {
                        total: res.data.total,
                        pageSize: res.data.pageSize,
                        pageNum: res.data.pageNum
                    }
                })
            })
        }
    }
    clearInpt = () => { //清空搜索框
        this.myInput.focus()
        this.myInput.state.value = ''
    }
    setStatus(record) { //设置上下架
        // console.log(record)
        const {pageSize,pageNum} = this.state.pagination
        if (record.status === 1) {
            record.status = 2
        }else {
            record.status = 1
        }
        http.post('/api/manage/product/set_sale_status.do',{'productId':record.id,'status':record.status}).then(res => {
            if (this.state.inpValue === '') {
                this.shopList(pageSize,pageNum)
            }else {
                this.search(pageSize,pageNum,this.state.inpValue)
            }
        })
    }
    toDetail = (id) => { //跳转到详情页
        this.props.history.push(`/main/detail/${id}`)
    }
    toEditor = (id) => { //跳转到编辑页
        this.props.history.push(`/main/editor/${id}`)
    }
    changePage = (page, pageSize) => { //分页
        // console.log(page,pageSize)
        if (this.state.inpValue === '') {
            this.shopList(page.pageSize,page.current)
        }else {
            this.search(page.pageSize,page.current,this.state.inpValue)
        }
    }
    componentDidMount() {
        const {pageSize,pageNum} = this.state.pagination
        this.shopList(pageSize,pageNum)
    }
    render() {
        const {pageSize,pageNum} = this.state.pagination
        const {shopList,inpValue,pagination} = this.state
        return (
            <div className='shop'>
                <div className='breadcrumb-con'>
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to='/main/home'>首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>商品</Breadcrumb.Item>
                        <Breadcrumb.Item>商品列表</Breadcrumb.Item>
                    </Breadcrumb>
                    <h2>商品列表</h2>
                </div>
                <div className='shop-con'>
                    <Form
                        className="ant-advanced-search-form"
                    >
                        <Row style={{ 'margin-left': '-12px', 'margin-right': '-12px' }}>
                            <Col span={8} style={{ 'padding-left': '12px', 'padding-right': '12px' }}>
                                <Form.Item label="关键词" labelCol={{ span: 4 }}>
                                    <Input id='productName' onChange={this.handelChange} onPressEnter={()=>this.search(pageSize,pageNum,inpValue)} ref={myInput=>this.myInput=myInput}/>
                                </Form.Item>
                            </Col>
                            <Col span={8} offset={8} style={{ 'padding-left': '12px', 'padding-right': '12px', 'text-align': 'right' }}>
                                <Button type="primary" htmlType="submit" onClick={()=>this.search(pageSize,pageNum,inpValue)}>搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.clearInpt}>清空</Button>
                            </Col>
                        </Row>
                    </Form>
                    <div className='shop-add'>
                        <Link to='/main/add'>
                            <Button type="primary">新增</Button>
                        </Link>
                    </div>
                    <Table dataSource={shopList} rowKey={record => record.id} pagination={pagination} onChange={this.changePage}>
                        <Column title="名称" dataIndex="name" key="name" />
                        <Column title="标题" dataIndex="subtitle" key="subtitle" />
                        <Column title="价格" dataIndex="price" key="price"
                            render={text => (
                                <span>￥{text}</span>
                            )}
                        />
                        <Column
                            title="商品状态"
                            dataIndex="status"
                            key="status"
                            render={(text, record) => (
                                <div className='shop-status'>
                                    <span className='shop-status-title'>
                                        {text === 1 ? '在售' : '已下架'}
                                    </span>
                                    <Button onClick={()=>this.setStatus(record)}>
                                        {text === 1 ? '设置下架' : '设置上架'}
                                    </Button>
                                </div>
                            )}
                        />
                        <Column title="操作"
                            render={(text,record) => (
                                <div>
                                    <a onClick={()=>this.toDetail(record.id)}>查看详情</a>
                                    <span> | </span>
                                    <a onClick={()=>this.toEditor(record.id)}>编辑</a>
                                </div>
                            )}
                        />
                    </Table>
                </div>
            </div>
        );
    }
}

export default Shop;